<script lang="ts" setup>
import { type CarbonReduction, getCarbonReductionF9 } from '../../../../apis';
import { INIT_PARAMS, PAGE_SIZE } from '../../../../constants';
import { useTable } from './useTable';
import IndicatorSource from '@/components/indicator-source/index.vue';
import { useF9Context } from '@/views/modules/enterprise/use/use-context';

interface Props {
  title: string;
  code: string;
}

const { title, code } = defineProps<Props>();
const { companyId } = useF9Context();

let pageNum = $ref(1);

const requestParams = reactive<CarbonReduction>({
  companyId,
  carbonReductionTerritoryCode: code,
  valueTypeCode: '1',
  ...INIT_PARAMS
});

const totalNum = ref(0);
let tableData = $ref([]);

const { data, run, loading, error } = useRequest(getCarbonReductionF9, {
  defaultParams: [requestParams],
  onSuccess: (data) => {
    totalNum.value = data.total;

    tableData = [];
    tableData = data?.values?.map((item) => {
      const name = item.carbonReductionCompanyVO;
      const values = item.indicatorInfo;

      return {
        ...name,
        values
      };
    });
  }
});
/** 溯源 */
const isTraceSource = ref(false);

const { columns, showActionsheet, actionData } = useTable(data, isTraceSource);

/** 翻页点击 */
const handlePageChange = (data) => {
  pageNum = data;
  run({ ...requestParams, pageNum });
};

const sortChange = (data) => {
  const { field, order } = data;
  const r = {
    indicatorFiled: order ? field : '',
    indicatorOrder: order ?? '',
    pageNum: 1
  };

  Object.assign(requestParams, r);
};

watch(
  () => requestParams,
  (val) => {
    pageNum = 1;
    run({ ...val, pageNum });
  },
  {
    deep: true
  }
);

const OPTIONS = ref([
  { name: '当季数据', code: '1' },
  { name: '本年累计', code: '2' },
  { name: '历史累计', code: '3' }
]);
</script>

<template>
  <vc-empty-fail @click="run({ ...requestParams, pageNum })" v-if="error" />
  <div class="mb-10" v-else>
    <div class="tabs">
      <span>{{ title }}</span>
      <div class="tabs-right">
        <vc-single-select v-model:value="requestParams.valueTypeCode" title="值类型" :options="OPTIONS" required />
        <span>
          溯源
          <el-switch v-model="isTraceSource" size="small" style="--el-switch-on-color: #02C680;"/>
        </span>
        <span>共计 <sapn style="color: rgba(255, 89, 89, 1)">{{ totalNum }}</sapn> 条</span>
      </div>
    </div>
    <vc-table
      :ref="'table-' + code"
      :loading="loading"
      :tableData="tableData"
      :columns="columns"
      :total="totalNum"
      :defaultSort="{
        field: 'annualCERs',
        order: 'desc'
      }"
      :pageSize="PAGE_SIZE"
      v-model:pageNum="pageNum"
      @page-change="handlePageChange"
      @sort-change="sortChange"
    />
    <!-- 溯源弹窗 -->
    <indicator-source v-model:show="showActionsheet" :actionData="actionData" />
  </div>
</template>
<style lang="scss" scoped>
.tabs {
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  &-right {
    height: 42px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
  }
}
</style>
